import React, { Component } from 'react'
import Header from 'components/headerBar/header'
import Craouel from 'components/carousel/carousel'
import { InfoContainer, BannerCon, HomeCon } from './infoStyle'
import { get } from 'utils/http'
import { Toast } from 'antd-mobile';
import { Button} from 'antd-mobile';
// import List from 'components/newslist/List'
import ListpRovider from 'components/newslist/listProvider'
import BScroll from 'better-scroll'

export default class information extends Component {
    constructor() {
        super()
        
    }
    state = {
        data: [],
        goTo: false,
        scrollY:0,
        bool:true,
        ids:0,
        params:1
    }
    addMoreList=()=>{
        this.state.params++;
        this.getInformationList()
    }
    render() {
        return (
            <div
                style={{
                    height: '100%',
                    overflow:'hidden'
                }}
                className="container"
            >
                <Header title="威锋果粉大本营" ></Header>
                <div style={{
                    height: 'calc(100% - 44px)',
                    overflow: "scroll"
                }}
                    className="wrapper">
                    <div>
                        <InfoContainer>
                            <BannerCon>
                                <Craouel></Craouel>
                            </BannerCon>
                            <ListpRovider list={this.state.data}></ListpRovider>
                            <Button onClick={this.addMoreList}>点击加载更多</Button>
                        </InfoContainer>

                    </div>

                </div>
                {
                    this.state.goTo && (<HomeCon>
                        <span className="home" >
                            <i onClick={this.goToTopHandle} className='yo-ico'>&#xe61c;</i>
                        </span>
                    </HomeCon>)


                }
            </div>

        )
    }
    async getInformationList() {
        let data = await get({
            url: 'http://h5test.wfdata.club/v1/content/type/list',
            params: {
                page: this.state.params
            },
            headers: {
                'X-Request-Id': 'dgmxgkvRVZg+WaDX0YdMU6N6CO/H3U7PGly02rBHH2ZU6pldHMBk//l5L1Q+RDqF9MYuLFXxaPic0W60EC8gaA==',
                'X-Running-Env': 'Q3OVXEArMgZNlMHtAxpu7ONj6bFtJQXn/rvs04BOX697Tr585tFrKIfZg2KoeUpgvnQYU5SNJ6oll+TA3FcxhCSpa6SvJgmuq4xYqBNA20NJ8ldwleqG5XO+/pJxDWDxaNNMPz7ogAvZMCU05jjILfwfb4xVDID+l4bJCv3PvZscJDIQEUoUSJwLTyrr7tv+gqSf9UY9s9WYRpJ1JOgOJVE/R7GAEfmgKwxF17NRO5ggEi+HSU8VLk4VqV/x4hOj'
            }
        })
        Toast.loading('Loading...', 1, () => {
            console.log('Load complete !!!');
          });
        // this.state.data = data.data.data.contentsList
        // this.setState({})
        this.setState((pre)=>{
           return  {data:pre.data.concat(data.data.data.contentsList)}
        })
        
        // console.log(this.state.data)
    }




    componentDidMount() {
        this.getInformationList()
        let wrapper = document.querySelector('.wrapper')
        wrapper.addEventListener('scroll', () => {
            console.log(wrapper.scrollTop)
            if (wrapper.scrollTop > 350) {
                this.state.goTo = true
                this.state.scrollY=wrapper.scrollTop
                this.setState({})
             if((wrapper.scrollTop+329)%1800==0){
                this.state.params++;
                this.getInformationList()
             }   
            }
            

            if(wrapper.scrollTop <=350){
                this.state.goTo = false
                this.setState({})
            }
        })
       


    }

    goToTopHandle = () => {
        this.state.bool=false
        this.setState({})
        this.ids=setInterval(this.animation,16)
                                                                                                   
    }
    animation=()=>{
        if(this.state.bool)  return
        let wrapper = document.querySelector('.wrapper')
        wrapper.scrollTop-=wrapper.scrollTop/5
        if(wrapper.scrollTop<=0){
            wrapper.scrollTop=0
            this.state.bool=true
            clearInterval(this.ids)
            this.setState({})
        }
    }
}
